<template>
	<view>
		<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers" scale=9
			@callouttap="callouttap">
		</map>

		<view class="end-title">
			<view class="tab" v-for="(item, index) in typeList" :key="index" @tap="changeTab(item)"
				:class="{btna:btnnum == item.sortOrder}">{{item.itemText}}</view>
		</view>

		<view v-for="(item, index) in typeList" :key="index">
			<view class="end-cont" :class="{dis:btnnum == item.itemValue}">
				<view class='block-list pos-rel clearfix' v-for="item in shopList" @click="onClick(item)">
					<view class="pos-abs img">
						<image style="width: 90px; height: 90px;" :mode="scaleToFill" :src="item.zhut"></image>
					</view>
					<view class="title wid100">{{item.facilitatorName}}</view>
					<view class="sub-title clearfix wid100">
						<uni-rate class="fxl" :readonly="true" :value="item.pingf" :size="18" />
						<span class="fxl font-red num" v-if="item.pingf">{{item.pingf}}</span>
					</view>
					<view class="clear"></view>
					<view class="title font-red" v-if="item.zhek">折扣: {{item.zhek}}</view>
					<view class="clear"></view>
					<view class="wid100 clearfix">
						<span class="fxl font-gray">{{item.address}}</span>
						<view class="clear"></view>
						<span class="clearfix">{{item.meterNode}}</span>
					</view>
				</view>

				<u-loadmore :status="loadStatus" @loadmore="loadmore" :load-text="loadText"></u-loadmore>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				loadText: {
					loadmore: '点击加载更多',
					loading: '加载中',
					nomore: '最后一条了'
				},
				loadStatus: 'loadmore',
				typeList: [],
				latitude: "39.897767",
				longitude: "116.319847",
				covers: [],
				btnnum: 1,
				type: null,
				shopList: [],
			}
		},

		onLoad() {
			let that = this

			uni.request({
				url: getApp().globalData.serviceUrl + "/sys/dictItem/list",
				data: {
					dictId: "1440551937475588097",
				},
				dataType: 'json',
				method: 'GET',
				success: (result) => {
					if (result.data.success) {
						that.typeList = result.data.result.records
						that.type = result.data.result.records[0].itemValue
					}
				}
			});
		},

		onShow() {
			let that = this

			uni.authorize({
				scope: 'scope.userLocation',
				success() {
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							uni.setStorageSync("gps", res)
							that.loadData(that.type)
						}
					})
				},
				fail: function(error) {
					console.log(error)
					uni.showModal({
						title: '提示',
						content: '授权获取位置信息，用于推荐最近门店',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.openSetting({
									success(res) {
										console.log(res.authSetting)
										uni.getLocation({
											type: 'gcj02',
											success: function(res) {
												uni.setStorageSync("gps", res)
												that.loadData(that.type)
											}
										})
									},
									fail: function(error2) {
										console.log(error2)
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})

				}
			})
		},

		onReachBottom(e) {
			console.log(e)
		},

		methods: {
			loadmore() {
				this.pageNo += 1
				this.loadData(this.type)
			},

			callouttap(e) {
				uni.setStorageSync("shopDetail", this.shopList[e.detail.markerId])

				uni.navigateTo({
					url: '../../pages2/shopDetail/shopDetail'
				})

			},

			onClick(item) {
				uni.setStorageSync("shopDetail", item)

				uni.navigateTo({
					url: '../../pages2/shopDetail/shopDetail'
				})
			},

			loadData(index) {
				let that = this

				uni.showLoading({
					title: "加载中..."
				})
				that.loadStatus = "loading"
				uni.request({
					url: getApp().globalData.serviceUrl + "/kuybFacilitator/findFacilitatorListByPoint",
					data: {
						type: index,
						latitudes: uni.getStorageSync("gps").latitude,
						longitudes: uni.getStorageSync("gps").longitude,
						pageNo: that.pageNo,
						pageSize: that.pageSize
					},
					dataType: 'json',
					method: 'GET',
					success: (result) => {
						uni.hideLoading()
						that.loadStatus = "loadmore"

						if (result.data.success) {
							if (result.data.result.length == 0)
								that.loadStatus = "nomore"

							that.shopList = that.shopList.concat(result.data.result)
							
							that.covers = []
							that.covers.push({
								latitude: uni.getStorageSync("gps").latitude,
								longitude: uni.getStorageSync("gps").longitude,
								iconPath: '../../static/my_location.png',
								width: 48,
								height: 48,
								title: "我的位置"
							})
							that.shopList.forEach((element, index) => {
								that.covers.push({
									id: index,
									latitude: element.latitudes,
									longitude: element.longitudes,
									iconPath: '../../static/other_location.png',
									width: 48,
									height: 48,
									callout: {
										fontSize: 20,
										padding: 10,
										borderRadius: 5,
										content: element.facilitatorName + ", 点击前往",
									}
								})
							})
						}
					}

				});
			},

			changeTab(item) {
				this.shopList = []
				this.covers = []
				this.pageNo = 1
				this.btnnum = item.sortOrder
				this.type = item.itemValue
				
				this.loadData(this.type)
			},

			change(e) {
				console.log(e)
				uni.navigateTo({
					url: '../../pages2/shopsList/shopsList?index=' + e.detail.index
				})
			}

		}
	}
</script>

<style scoped>
	</style
